<template>
	<view class="reserv">
		<!-- <u-navbar :autoBack="true" :title="title" :leftIconColor="titleColor" :titleStyle="titleStyle"></u-navbar> -->
		<!-- <view class="reserv-area" :style="{'padding-top':`${44+statusHgt}px`}"> -->
		<view class="reserv-area">
			<view class="door-mes">
				<view class="door-top">
					<view class="door-name u-flex">
						<image src="../../static/dor-yf-icon.png" mode=""></image>
						<text>{{doorName}}</text>
					</view>
					<view class="door-desk u-flex">
						<text>中式台球</text>
						<view class="desk-num">
							<text>{{deskMes.storeRoomName}}</text>
							<!-- 桌 -->
						</view>
					</view>
				</view>
				<!-- <view class="reserv-price u-flex">
					<text>预约金</text>
					<text>19.9元</text>
				</view> -->
				<view class="price-rule u-flex">
					<text>收费规则</text>
					<text>{{deskMes.price}}/时</text>
				</view>
			</view>
			
			<view class="sub-door u-flex">
				<view class="door-tit">
					选择预定时间
				</view>
				<view class="door-adres u-flex" @click="isShow(true)">
					<text>{{selectTimeText}}</text>
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view>
			
			<!-- <view class="sub-door u-flex">
				<view class="door-tit">
					支付方式
				</view>
				<view class="door-adres u-flex" @click="showDoor=true">
					<text>{{payVal}}</text>
					<u-icon name="arrow-right" color="#333333" size="14"></u-icon>
				</view>
			</view> -->
			<view class="tips-area">
				<view class="tips-tit">
					预约说明
				</view>
				<view>默认预约30分钟后的桌台</view>
				<view>1.预约后前3分钟取消预约，可退回预约款</view>
				<view>2.预约后超过3分钟，未开台扣除预约金</view>
				<view>3.预约后到场开台，自动退回预约金</view>
				<view>4.预约成功后，超过30分钟开台，扣除预约金</view>
			</view>
		</view>
		<view class="botm-fixd u-flex">
			<view class="left-price">
				<!-- <text>19.9</text>元 -->
			</view>
			<view class="res-btn" @click="submitResv">
				立即预约
			</view>
		</view>
		<u-picker :show="showDoor" :columns="columns" @cancel="showDoor=false" @confirm="selDoor"></u-picker>

		<u-popup :show="show" :round="10" mode="bottom" @close="isShow(false)">
			<view class="selectBox">
				<view class="titleBox">
					<view class="title">
						预定时间
						<image src="@/static/icon/close.png" mode="" @click="isShow(false)"></image>
					</view>
				</view>

				<!-- <view class="rollBox">
					
					<swiper class="swiper" circular="true" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item,index) in list" :key="index">
							<view class="swiper-item uni-bg-green">{{item}}</view>
						</swiper-item>
					</swiper>
					
				</view> -->

				<selectTime :beginTime="selectBeginTime" :endTime="selectEndTime" ref="selectTime">
					<!-- 这个地方是时间选择的组件，只需要传两个值 -->
					<!-- selectBeginTime是店铺开始营业的时间 默认值：00:00  格式是 HH:mm -->
					<!-- selectEndTime是店铺结束营业的时间 默认值：24:00  格式是 HH:mm -->
				</selectTime>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import selectTime from "../../components/selectTime/selectTime.vue"
	import { getTimeListOrder } from '@/api/order';
	import Bus from '@/utils/Bus.js'
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
	import { getUserStat} from '@/api/user'
	export default {
		data() {
			return {
				title: '越船自助台球',
				titleColor: '#333333',
				titleStyle: {
					color: '#333333'
				},
				content: ``,
				vuex_city: '',
				keyword: '',
				statusHgt: 0,
				payVal: '微信支付',
				showDoor: false, //选择支付方式
				columns: [
					['微信支付', '支付宝']
				],
				show: false, // 弹出层显示状态
				selectBeginTime: "00:00", // 日期的开始时间
				selectEndTime: "23:59", // 日期的结束时间,ios手机，24：00，打印出来为NAN，所以，处理是加上1000*60
				selectTimeText: "选择预定时间",
				selTimeData:{},
				timeList:[],
				time: 0, // 时长
				timeInterval:1,
				deskMes:{},
				doorName:'',
				obj:{
				   timeList:[/* {
						date: "05-06", // 月份-日期
						selectBeginTime: "03:00", // 时间的开始时间
						// 时间格式 HH:mm:ss
						selectEndTime: "05:00", // 时间的结束时间
						sweep:1, // 打扫所需的时间段 
					} */]
				},
				isRepeat:0,
				sumUserBalance:0,
				teaChildId: 0,
				storeRoomItem:{}
			}
		},
		provide: function() {
			return {
				subscribeObj:this.obj,
			}
		},
		computed: mapGetters(['userInfo']),
		onLoad(option) {
			console.log(JSON.parse(option.deskMes))
			this.storeRoomItem=JSON.parse(option.storeRoom)
			this.deskMes=JSON.parse(option.deskMes)
			this.doorName=this.storeRoomItem.name
			
			this.statusHgt = getApp().globalData.statusBarHeight;
			// return
			Bus.$on('isShow', (res) => {
				this.isShow(res)
			})
			
			Bus.$on('isTime', (res) => {
				this.isTime(res)
			})
		},
		onShow() {
			console.log("onShow")
			this.userStat();			
		},
		methods: {
			userStat(){
				let param = {
					userId:this.userInfo.uid
				}
				getUserStat(param).then(res => {
					var sumUserBalance = res.data.sumUserBalance;
					this.sumUserBalance = sumUserBalance;
				})
			},
			//选择支付方式
			selDoor(val) {
				this.payVal = val.value[0];
				this.showDoor = false
				console.log(val)
			},
			
			// 子组件传来的时间信息
			isTime(time) {
				
				this.time = time.timeInterval
				console.log("时常:" + time.timeInterval); // 预定时常
				console.log("预定日期:" + time.deta.date1); // 预定日期
				console.log("预定日期:" + time.deta.date); // 预定日期
				console.log("时间:" + time.startTime.begin + ' - ' + time.endTime.end); // 结束预约时间
				this.selectTimeText = time.deta.date+" " +time.startTime.begin+"~"+time.endTime.end
				//console.log("时间:" + time.startTime.time + ' - ' + time.endTime.time); // 结束预约时间
				this.selTimeData = time;
				this.timeInterval = time.timeInterval 
				
				 
			},

			// 设置选择时间框的显示状态
			isShow(state) {

				if (state) {

					let param = {
						teaChildId: this.teaChildId
					}
					getTimeListOrder(param).then(res => {

						var timeList = res.data.timeList
						this.obj.timeList = []
						console.log("timeList:" + JSON.stringify(timeList))
						timeList.forEach(item => {

							/* 					var reItem = {
													date: item.date, // 月份-日期
													selectBeginTime: item.selectBeginTime, // 时间的开始时间
													// 时间格式 HH:mm:ss
													selectEndTime: item.selectEndTime, // 时间的结束时间
													sweep:1, // 打扫所需的时间段 
												} */

							if (this.isRepeat == 1) {

								this.obj.timeList.push({
									date: item.date, // 月份-日期
									selectBeginTime: item.selectBeginTime, // 时间的开始时间
									endDate: item.endDate, // 月份-日期
									// 时间格式 HH:mm:ss
									selectEndTime: item.selectEndTime, // 时间的结束时间
									sweep: 0, // 打扫所需的时间段 
								})

							} else {

								this.obj.timeList.push({
									date: item.date, // 月份-日期
									selectBeginTime: item.selectBeginTime, // 时间的开始时间
									endDate: item.endDate, // 月份-日期
									// 时间格式 HH:mm:ss
									selectEndTime: item.selectEndTime, // 时间的结束时间
									sweep: 1, // 打扫所需的时间段 
								})

							}

						})
						this.show = state
						this.$refs.selectTime.refreshTimeList(1);
					})
				} else {
					this.show = state
				}

				
			},
			
			submitResv(){
				if (this.time != 0) {
					if(this.storeRoomItem.startTimeNum > this.timeInterval){
						uni.showToast({
							title: this.storeRoomItem.startTimeNum+"小时起订,请选择小时数大于等于"+this.storeRoomItem.startTimeNum+"小时哦",
							icon: "none"
						})
						return false;
					}
				}
				let orderMoney = this.time ? this.time*this.deskMes.price : 0;
				let url = '/pages/subPack/orderList/closeAccount'+'?teaId='+this.storeRoomItem.id + '&teaChildId='+this.deskMes.roomId + '&storeRoomName='+this.deskMes.storeRoomName +
					'&storeName='+this.storeRoomItem.name + '&image=' + this.deskMes.icon + '&orderMoney=' + orderMoney + '&selectTimeText='+this.selectTimeText +
					'&price='+this.deskMes.price +'&timeInterval='+this.timeInterval+'&repeatPrice='+this.deskMes.repeatPrice +'&isRepeat=0'+'&parentOrderId=0'+'&orderType=2'
					+'&yeardate='+this.selTimeData.deta.date1+'&startTime='+this.selTimeData.startTime.begin+'&endDate='+this.selTimeData.endTime.selectDate+
					'&endTime='+this.selTimeData.endTime.end+'&monthDay='+this.selTimeData.startTime.selectDate+'&startTimeNum='+this.storeRoomItem.startTimeNum
				
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>
<style>
	page {
		background-color: #EDEDED;
	}
</style>
<style lang="scss" scoped>
	.botm-fixd {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		box-shadow: 0px 0px 19rpx 1rpx rgba(0, 0, 0, 0.1);
		padding: 0 28rpx;
		box-sizing: border-box;
		justify-content: space-between;

		.left-price {
			text {
				font-size: 44rpx;
				color: #FF7814;
				font-weight: 550;
			}

			font-size: 24rpx;
			color: #333333;
		}

		.res-btn {
			width: 240rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #FF7814;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-weight: 550;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.reserv-area {
		padding: 0 28rpx;

		.sub-door {
			justify-content: space-between;
			padding: 30rpx 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 28rpx 0;

			.door-tit {
				font-size: 28rpx;
				font-weight: 550;
				color: #333333;
			}

			.door-adres {
				font-size: 28rpx;
			}
		}

		.tips-area {
			>view {
				font-size: 22rpx;
				font-weight: 400;
				color: #777777;
				line-height: 36rpx;
			}

			.tips-tit {
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 10rpx;
				font-weight: 550;
			}
		}
	}

	.door-mes {
		background: #FF7814;
		border-radius: 8rpx;
		margin-top: 20rpx;

		.door-top {
			padding: 30rpx 20rpx 0;

			.door-name {
				image {
					width: 32rpx;
					height: 30rpx;
				}

				font-size: 32rpx;
				font-weight: 550;
				color: #FFFFFF;
			}

			.door-desk {
				margin: 20rpx 0;
				justify-content: space-between;

				>text {
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.desk-num {
					text {
						font-size: 48rpx;
						font-weight: 550;
						color: #FFFFFF;
					}

					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}

		.reserv-price,
		.price-rule {
			justify-content: space-between;
			padding: 0 20rpx;
			line-height: 88rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #DDDDDD;

			text {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.price-rule {
			border-bottom: none;
			border-bottom-left-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
		}


	}

	.selectBox {
		width: auto;
		height: 75vh;
		overflow: auto;

		.titleBox {
			width: 100%;
			height: auto;
			margin-top: 25rpx;
			text-align: center;
			font-size: 34rpx;
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 20rpx;
			}
		}
	}
</style>